<template>
  <div class="echarts">
    <div class="echartcenter">
      <div class="boxquan">
        <!-- <div class="datitle">
          <div class="datitleCont">
            <h6>最外层</h6>
            <span><label style="color:rgb(247, 157, 79);">单位主动暴露</label><br /><label style="color:#FBC300">公司发现单位问题数</label></span>
            <span style="margin-left:10px;"><label style="color:rgb(247, 157, 79);">整改率</label><br /><label style="color:#FBC300">整改率</label></span>
          </div>
          <div class="datitleCont" style="margin-top:10px;">
            <h6>第二层</h6>
            <span style="color:#FBC300">左：单位问题数</span>
            <span style="margin-left:10px;color:#FBC300">右：整改率</span>
          </div>
        </div> -->
        <ul class="second">
          <li v-for="(item,index) in this.dwwentizs" :key="index">
            <dl>
              <dd class="rcone" >{{ item.dwmc }}</dd>
              <dd class="rctwo">{{ item.sl }}</dd>
              <dd class="rctwo last" style="color:#FBC300">{{ item.zgl }}%</dd>
            </dl>
          </li>
          <!-- <li>
            <dl>
              <dd class="rcone">广州局</dd>
              <dd class="rctwo">123</dd>
              <dd class="rctwo last">54%</dd>
            </dl>
          </li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li> -->
          <dt class="first">
            <dl>公司</dl>
            <dl>
              总数<span>{{ wentizs }}</span>
            </dl>
            <dl style="color:#FBC300">
              整改率<span>{{ zwcl }}%</span>
            </dl>
            <div class="shuxian">
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
              <span><b></b></span>
            </div>
          </dt>
          <div class="shuxianwaicen">
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
            <span><b></b></span>
          </div>
          <ul class="three">
            <li v-for="(item,index) in this.dwgsfaxianwentizs" :key="index">
              <dl>
                <!-- <dd></dd>
                <dd class="rctwo">总数</dd>
                <dd class="rctwo last" style="color:#FBC300">整改率</dd>
                <br /> -->
                <dd>上级:</dd>
                <dd class="rctwo">总数<br />{{ item.gssl }}</dd>
                <dd class="rctwo last" style="color:#FBC300">整改率<br>{{ item.gszgl }}%</dd>
                <br />
                <dd>本级:</dd>
                <dd class="rctwo">{{ item.dwsl }}</dd>
                <dd class="rctwo last" style="color:#FBC300">{{ item.dwzgl }}%</dd>
              </dl>
            </li>
            <!-- <li>
              <dl>
                <dd class="rcone">广州局</dd>
                <dd class="rctwo">123</dd>
                <dd class="rctwo last">54%</dd>
              </dl>
            </li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li> -->
          </ul>
        </ul>
      </div>
    </div>
  </div>
</template>
 
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  data() {
    return {
      currentObj: [],
      wentizs: 0, //总数
      zwcl: "", //总的整改率
      dwlist: "", //单位整改率
      dwwentizs: "", //单位问题数
      dwgsfaxianwentizs: "", //公司发现单位问题数
      dwgszdbllist: "", //公司发现单位整改率
      dwzdblzs: "", //单位主动暴露问题数
      dwzdbllist: "", //单位主动暴露整改率
      temp1: "", //第二圈整合
      temp2: [], //第三圈整合
    };
  },
  props: {
    // echartObj: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  created() {
    // this.$nextTick(() => {
    //   this.loadEchart();
    // });
  },
  mounted() {
    // let _this = this;
    // window.onresize = function () {
    //   _this.myChart.resize();
    // };
  },
  methods: {
    loadEchart(res) {
      console.log(res);
      this.wentizs = res.data.retData.wentizs; //总数
      this.zwcl = res.data.retData.zwcl; //总的整改率
      this.dwwentizs = res.data.retData.dwwentizs; //单位问题数
      this.dwlist = res.data.retData.dwlist; //单位整改率
      for (var i = 0; i < this.dwwentizs.length; i++) {
        this.dwlist.forEach((item) => {
          for (let k in item) {
            //console.log(k);
            if (k == this.dwwentizs[i].dwmc) {
              //console.log(item[k]);
              this.dwwentizs[i].zgl = item[k];
              break;
            }
          }
        });
      }
      //console.log(this.dwwentizs);

      this.dwgsfaxianwentizs = res.data.retData.dwgsfaxianwentizs; //公司发现单位问题数
      this.dwgszdbllist = res.data.retData.dwgszdbllist; //公司发现单位整改率
      for (var i = 0; i < this.dwgsfaxianwentizs.length; i++) {
        this.dwgszdbllist.forEach((item) => {
          for (let k in item) {
            //console.log(k);
            if (k == this.dwgsfaxianwentizs[i].dwmc) {
              //console.log(item[k]);
              this.dwgsfaxianwentizs[i].zgl = item[k];
              break;
            }
          }
        });
      }
      console.log(this.dwgsfaxianwentizs);

      this.dwzdblzs = res.data.retData.dwzdblzs; //单位主动暴露问题数
      this.dwzdbllist = res.data.retData.dwzdbllist; //单位主动暴露整改率
      for (var i = 0; i < this.dwzdblzs.length; i++) {
        this.dwzdbllist.forEach((item) => {
          for (let k in item) {
            //console.log(k);
            if (k == this.dwzdblzs[i].dwmc) {
              //console.log(item[k]);
              this.dwzdblzs[i].zgl = item[k];
              break;
            }
          }
        });
      }
      console.log(this.dwzdblzs);

      var temp = [];
      for (var i = 0; i < this.dwgsfaxianwentizs.length; i++) {
        for (var j = 0; i < this.dwzdblzs.length; j++) {
          var obj = {};

          if (this.dwzdblzs[j].dwmc == this.dwgsfaxianwentizs[i].dwmc) {
            //             console.log(this.dwzdblzs[i].dwmc);
            // console.log(this.dwgsfaxianwentizs[i].dwmc);
            //console.log(item[k]);
            obj.gszgl = this.dwgsfaxianwentizs[i].zgl;
            obj.gssl = this.dwgsfaxianwentizs[i].sl;
            obj.dwzgl = this.dwzdblzs[i].zgl;
            obj.dwsl = this.dwzdblzs[i].sl;
            break;
          }
        }
        temp.push(obj);
      }
      this.dwgsfaxianwentizs = temp;
      console.log(this.dwgsfaxianwentizs);

    },
  },
};
</script>
 
<style lang='less' scoped>
body {
  padding: 0;
  margin: 0;
}

ul,
li,
dt,
dl,
dd {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
.datitle {
  display: inline-block;
  width: 270px;
  position: absolute;
    top: -7%;
    left: -19%;
  color: white;
  font-size: 0;
}
.datitle .datitleCont {
  display: inline-block;
  h6 {
    float: left;
    margin: 0 10px 0 0;
    font-size: 12px;
  }
  span {
    float: left;
    font-size: 12px;
  }
}
.second {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: relative;
  font-size: 12px;
}
.second li {
  width: 64px;
  height: 64px;
  position: absolute;
  background: url("../../../assets/img/zbbg.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
  text-align: center;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
}

.second li dl {
  position: absolute;
  top: 0;
  transform-origin: unset !important;
  color: white;
}
.second li dl dd {
  display: inline-block;
}
.second li dl .rcone {
  display: block;
  margin-top: 5px;
}
.second li dl .rctwo {
  display: inline-block;
  margin-top: 3px;
}
.second li dl .rctwo.last {
  margin-left: 5px;
  z-index: 99;
}
.second li:nth-of-type(2) {
  transform: rotate(27.7deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(2) dl {
  transform: rotate(-27.7deg);
}
.second li:nth-of-type(3) {
  transform: rotate(55.4deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(3) dl {
  transform: rotate(-55.4deg);
}
.second li:nth-of-type(4) {
  transform: rotate(83.1deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(4) dl {
  transform: rotate(-83.1deg);
}
.second li:nth-of-type(5) {
  transform: rotate(110.8deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(5) dl {
  transform: rotate(-110.8deg);
}
.second li:nth-of-type(6) {
  transform: rotate(138.5deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(6) dl{
  transform: rotate(-138.5deg);
}
.second li:nth-of-type(7) {
  transform: rotate(166.2deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(7) dl {
  transform: rotate(-166.2deg);
}
.second li:nth-of-type(8) {
  transform: rotate(193.9deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(8) dl{
  transform: rotate(-193.9deg);
}
.second li:nth-of-type(9) {
  transform: rotate(221.6deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(9) dl{
  transform: rotate(-221.6deg);
}
.second li:nth-of-type(10) {
  transform: rotate(249.3deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(10) dl{
  transform: rotate(-249.3deg);
}
.second li:nth-of-type(11) {
  transform: rotate(277deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(11) dl{
  transform: rotate(-277deg);
}
.second li:nth-of-type(12) {
  transform: rotate(304.7deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(12) dl{
  transform: rotate(-304.7deg);
}
.second li:nth-of-type(13) {
  transform: rotate(332.4deg);
  transform-origin: 20px 150px;
}
.second li:nth-of-type(13) dl{
  transform: rotate(-332.4deg);
}

.shuxian {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  font-size: 12px;
  top: -8%;
  left: 48%;
  margin-left: -25px;
}
.shuxian span {
  width: 32px;
  height: 32px;
  position: absolute;
  // background-color: blue;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  left: 50%;
  margin-left: -14px;
  margin-top: -20px;
}
.shuxian span b {
  width: 50px;
  height: 1.5px;
  background-color: #2661b3;
  display: inline-block;
  position: absolute;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  left: -3px;
}
.shuxian span:nth-of-type(2) {
  transform: rotate(27.7deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(3) {
  transform: rotate(55.4deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(4) {
  transform: rotate(83.1deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(5) {
  transform: rotate(110.8deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(6) {
  transform: rotate(138.5deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(7) {
  transform: rotate(166.2deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(8) {
  transform: rotate(193.9deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(9) {
  transform: rotate(221.6deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(10) {
  transform: rotate(249.3deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(11) {
  transform: rotate(277deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(12) {
  transform: rotate(304.7deg);
  transform-origin: 20px 80px;
}
.shuxian span:nth-of-type(13) {
  transform: rotate(332.4deg);
  transform-origin: 20px 80px;
}

.first {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 32%;
  width: 141px;
  height: 131px;
  display: inline-block;
  font-size: 12px;
  background: url(../../../assets/img/bbg.png) no-repeat;
  background-size: 100% 100%;
  color: white;
}
.first dl:nth-of-type(1) {
  margin-bottom: 3%;
  margin-top: 16px;
}
.first dl:nth-of-type(2) {
  display: inline-block;
}
.first dl:nth-of-type(2) span {
  display: block;
}
.first dl:nth-of-type(3) {
  display: inline-block;
  margin-left: 8%;
}
.first dl:nth-of-type(3) span {
  display: block;
}

.shuxianwaicen {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  font-size: 12px;
  top: -7%;
  left: 49%;
  margin-left: -25px;
}
.shuxianwaicen span {
  width: 32px;
  height: 32px;
  position: absolute;
  // background-color: blue;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  left: 50%;
  margin-left: -14px;
  margin-top: -20px;
}
.shuxianwaicen span b {
  width: 50px;
  height: 1.5px;
  background-color: #315992;
  display: inline-block;
  position: absolute;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  left: -3px;
}
.shuxianwaicen span:nth-of-type(2) {
  transform: rotate(27.7deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(3) {
  transform: rotate(55.4deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(4) {
  transform: rotate(83.1deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(5) {
  transform: rotate(110.8deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(6) {
  transform: rotate(138.5deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(7) {
  transform: rotate(166.2deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(8) {
  transform: rotate(193.9deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(9) {
  transform: rotate(221.6deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(10) {
  transform: rotate(249.3deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(11) {
  transform: rotate(277deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(12) {
  transform: rotate(304.7deg);
  transform-origin: 20px 180px;
}
.shuxianwaicen span:nth-of-type(13) {
  transform: rotate(332.4deg);
  transform-origin: 20px 180px;
}

.three {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: relative;
  font-size: 12px;
}
.three li {
  width: 64px;
  height: 64px;
  position: absolute;
  background: url("../../../assets/img/sbg.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
  text-align: center;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  top: -26%;
}
.three li dl {
  width: 105px;
  height: 65px;
  position: absolute;
  top: 0;
  transform-origin: unset !important;
  color: white;
}
.three li dl dd {
  display: inline-block;
}
.three li dl .rcone {
  display: block;
  margin-top: 5px;
}
.three li dl .rctwo {
  display: inline-block;
  margin-top: 3px;
  text-align: left;
}
.three li dl .rctwo.last {
  margin-left: 5px;
}
.three li:nth-of-type(2) {
  transform: rotate(27.7deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(2) dl {
  transform: rotate(-27.7deg);
}
.three li:nth-of-type(3) {
  transform: rotate(55.4deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(3) dl {
  transform: rotate(-55.4deg);
}
.three li:nth-of-type(4) {
  transform: rotate(83.1deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(4) dl {
  transform: rotate(-83.1deg);
}
.three li:nth-of-type(5) {
  transform: rotate(110.8deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(5) dl {
  transform: rotate(-110.8deg);
}
.three li:nth-of-type(6) {
  transform: rotate(138.5deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(6) dl{
  transform: rotate(-138.5deg);
}
.three li:nth-of-type(7) {
  transform: rotate(166.2deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(7) dl{
  transform: rotate(-166.2deg);
}
.three li:nth-of-type(8) {
  transform: rotate(193.9deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(9) {
  transform: rotate(221.6deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(10) {
  transform: rotate(249.3deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(11) {
  transform: rotate(277deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(12) {
  transform: rotate(304.7deg);
  transform-origin: 20px 250px;
}
.three li:nth-of-type(13) {
  transform: rotate(332.4deg);
  transform-origin: 20px 250px;
}
</style>